<template>
	<div id="root">
		<div class="todo-container">
			<div class="todo-wrap">
				<!-- props 方式实现子组件向父组件传递数据 -->
				<!-- <TodoHeader :addTodo="addTodo"></TodoHeader> -->
				<!-- 自定义事件方式实现子组件向父组件传递数据 -->
				<TodoHeader @addTodo="addTodo"></TodoHeader>

				<!-- props 方式实现子组件向父组件传递数据 -->
				<TodoList :todos="todos" :updateTodoDone="updateTodoDone" :deleteTodo="deleteTodo"></TodoList>
				
				
				<!-- props 方式实现子组件向父组件传递数据 -->
				<!-- <TodoFotter :todos="todos" :updateAllDone="updateAllDone" :deleteAllIsDone="deleteAllIsDone"></TodoFotter> -->
				<!-- 自定义事件方式实现子组件向父组件传递数据 -->
				<TodoFotter :todos="todos" @updateAllDone="updateAllDone" @deleteAllIsDone="deleteAllIsDone"></TodoFotter>
			</div>
		</div>
	</div>
</template>

<script>
	import TodoHeader from "./components/TodoHeader.vue";
	import TodoList from "./components/TodoList.vue";
	import TodoFotter from "./components/TodoFotter.vue";

	export default {
		name: "App",
		components: {
			TodoHeader,
			TodoList,
			TodoFotter,
		},
		data() {
			return {
				// 从 localStorage 中读取数据，如果为空就使用空数组
				todos: JSON.parse(window.localStorage.getItem('todos')) || []
			}
		},
		watch: {
			// 监听属性变化
			todos: {
				deep: true, // 使用深度监听，否则普通的属性监听Vue无法检测到数组元素内部变化
				handler(newVal) {
					// 将数据重新存入localStorage
					window.localStorage.setItem('todos', JSON.stringify(newVal));
				}
			}
		},

		methods: {
			updateTodoDone(id) {
				this.todos.forEach((e) => {
					if (e.id === id) {
						e.done = !e.done;
					}
				})
			},
			deleteTodo(id) {
				this.todos = this.todos.filter(e => e.id != id);
			},
			addTodo(todo) {
				this.todos.unshift(todo);
			},
			updateAllDone(done) {
				this.todos.forEach(e => e.done = done)
			},
			deleteAllIsDone() {
				this.todos = this.todos.filter(e => !e.done);
			}
		}
	};
</script>

<style>
	body {
		background: #fff;
	}

	.btn {
		display: inline-block;
		padding: 4px 12px;
		margin-bottom: 0;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
		border-radius: 4px;
	}

	.btn-danger {
		color: #fff;
		background-color: #da4f49;
		border: 1px solid #bd362f;
	}

	.btn-danger:hover {
		color: #fff;
		background-color: #bd362f;
	}

	.btn:focus {
		outline: none;
	}

	.todo-container {
		width: 600px;
		margin: 0 auto;
	}

	.todo-container .todo-wrap {
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
	}
</style>